<template>
  <div class="g-content">
    <div class="g-fillter">
      <div class="item">
        <div class="s">姓名</div>
        <input type="text" class="inp" placeholder="请输入" />
      </div>
      <div class="item">
        <div class="s">手机号</div>
        <input type="text" class="inp" placeholder="请输入" />
      </div>
      <div class="opts">
        <div class="btn">
          <img src="@img/c-btn2.svg" alt="" />
        </div>
        <div class="btn"><img src="@img/c-btn3.svg" alt="" /></div>
      </div>
    </div>
    <div class="m-tableb1 flex1">
      <a-table
        bordered
        :dataSource="dataSource"
        :columns="columns"
        :pagination="false"
        :row-class-name="
          (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
        "
      >
        <template #bodyCell="{ column,record }">
          <template v-if="column.dataIndex === 'action'">
            <div class="actions">
              <a @click="editPop(record)">编辑</a>
              <a v-if="record.status === '生效'"  @click="disableStatus(record)">禁用</a>
                <a v-else  @click="disableStatus(record)">启用</a>
            </div>
          </template>
        </template>
      </a-table>
    </div>
    <div class="con-bot">
      <div class="l">
        <div class="add" @click="visible = true"><span>+</span>新建/编辑</div>
      </div>
      <div class="r">
        <div class="g-pages">
          <a-pagination
            v-model:current="current"
            v-model:page-size="pageSize"
            :total="85"
            showQuickJumper
            :show-total="
              (total, range) =>
                `显示${range[0]}到${range[1]} ,共 ${total} 条记录`
            "
          ></a-pagination>
        </div>
      </div>
    </div>
  </div>


  <!-- 新建弹窗start -->
  <a-modal
    v-model:visible="visible"
    class="jl-pop"
    :centered="true"
    :footer="null"
  >
    <div class="bg"><img src="@img/bl-p1.png" alt="" /></div>
    <div class="pop-con">
      <div class="g-titb1">
        <div class="h3">新建</div>
      </div>
      <div class="jl-form1">
        <div class="m-popboxb1">
          <div class="item">
            <div class="lab">请输入账号</div>
            <div class="inp">
              <input type="text" placeholder="请输入" />
            </div>
          </div>
          <div class="item">
            <div class="lab">请输入姓名</div>
            <div class="inp">
              <input type="text" placeholder="请输入" />
            </div>
          </div>
          <div class="item">
            <div class="lab">请输入手机号</div>
            <div class="inp">
              <input type="text" placeholder="请输入" />
            </div>
          </div>
          <div class="item">
            <div class="lab">请选择角色</div>
            <div class="inp">
              <a-select placeholder="请选择" v-model:value="rolevalue">
                <a-select-option value="管理员">管理员</a-select-option>
                <a-select-option value="用户">用户</a-select-option>
              </a-select>
            </div>
          </div>

          <div class="item">
            <div class="lab">请输入密码</div>
            <div class="inp">
              <input type="password" placeholder="请输入" />
            </div>
          </div>
          <div class="item">
            <div class="lab">请确认输入密码</div>
            <div class="inp">
              <input type="password" placeholder="请输入" />
            </div>
          </div>
        </div>
      </div>
      <div class="jl-action">
        <div class="btn sty1" @click="visible = false">取消</div>
        <div class="btn sty2" @click="visible = false">确定</div>
      </div>
    </div>
  </a-modal>
  <!-- 新建弹窗end -->

  

  <!-- 编辑弹窗start -->
  <a-modal
    v-model:visible="visibleEdit"
    class="jl-pop"
    :centered="true"
    :footer="null"
  >
    <div class="bg"><img src="@img/bl-p1.png" alt="" /></div>
    <div class="pop-con">
      <div class="g-titb1">
        <div class="h3">编辑</div>
      </div>
      <div class="jl-form1">
        <div class="m-popboxb1">
          <div class="item">
            <div class="lab">请输入账号</div>
            <div class="inp">
              <input type="text" placeholder="请输入" />
            </div>
          </div>
          <div class="item">
            <div class="lab">请输入姓名</div>
            <div class="inp">
              <input type="text" placeholder="请输入" />
            </div>
          </div>
          <div class="item">
            <div class="lab">请输入手机号</div>
            <div class="inp">
              <input type="text" placeholder="请输入" />
            </div>
          </div>
          <div class="item">
            <div class="lab">请选择角色</div>
            <div class="inp">
              <a-select placeholder="请选择" v-model:value="rolevalue">
                <a-select-option value="管理员">管理员</a-select-option>
                <a-select-option value="用户">用户</a-select-option>
              </a-select>
            </div>
          </div>

          <div class="item">
            <div class="lab">请输入密码</div>
            <div class="inp">
              <input type="password" placeholder="请输入" />
            </div>
          </div>
          <div class="item">
            <div class="lab">请确认输入密码</div>
            <div class="inp">
              <input type="password" placeholder="请输入" />
            </div>
          </div>
        </div>
      </div>
      <div class="jl-action">
        <div class="btn sty1" @click="visible = false">取消</div>
        <div class="btn sty2" @click="visible = false">确定</div>
      </div>
    </div>
  </a-modal>
  <!-- 编辑弹窗end -->
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';

function getImageUrl (name) {
  return new URL(`../../assets/images/${name}`, import.meta.url).href;
}

const current = ref(2);
const pageSize = ref(20);

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '账号',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '手机号',
    dataIndex: 'tel',
    key: 'tel',
  }, {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  }, {
    title: '角色',
    dataIndex: 'role',
    key: 'role',
  }, {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
  },
];

const dataSource = ref([
  {
    key: '1',
    name: '胡彦斌',
    id: 'ZWEJ1000120',
    tel: '130123456478',
    status: '生效',
    role: '管理员'
  },
  {
    key: '2',
    name: '胡彦斌',
    id: 'ZWEJ1000120',
    tel: '130123456478',
    status: '生效',
    role: '管理员'
  },
  {
    key: '3',
    name: '胡彦斌',
    id: 'ZWEJ1000120',
    tel: '130123456478',
    status: '生效',
    role: '管理员'
  },
  {
    key: '4',
    name: '胡彦斌',
    id: 'ZWEJ1000120',
    tel: '130123456478',
    status: '生效',
    role: '管理员'
  },
  {
    key: '5',
    name: '胡彦斌',
    id: 'ZWEJ1000120',
    tel: '130123456478',
    status: '生效',
    role: '管理员'
  },
  {
    key: '6',
    name: '胡彦斌',
    id: 'ZWEJ1000120',
    tel: '130123456478',
    status: '生效',
    role: '管理员'
  },
  {
    key: '7',
    name: '胡彦斌',
    id: 'ZWEJ1000120',
    tel: '130123456478',
    status: '生效',
    role: '管理员'
  },
  {
    key: '8',
    name: '胡彦斌',
    id: 'ZWEJ1000120',
    tel: '130123456478',
    status: '生效',
    role: '管理员'
  }
]);



const visible = ref(false);

const visibleEdit = ref(false);

function editPop (param) {
  visibleEdit.value = true;
}

function disableStatus(record) { 
  console.log(record);
  const index = dataSource.value.indexOf(record);
  dataSource.value[index].status = record.status === '生效' ? '禁用' : '生效';
  message.success('操作成功');
 }
onMounted(() => {
  console.log('mounted');
});


</script>

<style>
</style>